<template>
    <div>
        <span>获取验证码({{ time }}s)</span>
    </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
let props = defineProps(["flag"]);
//倒计时的事件
let time = ref<number>(5);

// 监听flag的变化
watch(() => props.flag, () => { 
    let timer = setInterval(() => {
        if (time.value > 0 && time.value <= 5) {
            time.value--;
        } else {
            clearInterval(timer);
            $emit('getFlag', false);
        }
    }, 1000);
},{immediate:true})

let $emit = defineEmits(['getFlag']);
</script>

<style lang="scss" scoped></style>